     
<script type="text/javascript">

            jQuery(function($){

                    $.supersized({

                            // Functionality
                            slide_interval   : 3000,// Length between transitions
                            transition       : 1,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                            transition_speed : 700, // Speed of transition

                            // Components							
                            slide_links	: 'blank',// Individual links for each slide (Options: false, 'num', 'name', 'blank')
                            slides 	:[ 	// Slideshow Images
                                            <?php foreach ($fotos as $k => $v) {
                                                    $file = $v['pasta'].'/'.$v['ds_imagem'];
                                                   echo "{image : 'server/php/files/".$file."', title : 'Fotografo: Daniel Martins', thumb : 'server/php/thumbnails/".$file."'},";
                                            } ?>
                                            
                                        ]

                    });
           /*efeitos do menu
           
            * for each menu element, on mouseenter, 
            * we enlarge the image, and show both sdt_active span and 
            * sdt_wrap span. If the element has a sub menu (sdt_box),
            * then we slide it - if the element is the last one in the menu
            * we slide it to the left, otherwise to the right
            */
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
           
           
           /*efeitos do menu*/
           
           });

        </script>
		
	
	<style type="text/css">
		ul#demo-block{ margin:0 15px 15px 15px; }
                ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('includes/imagens/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
                ul#demo-block li a{ color:#eee; font-weight:bold; }
	</style>
        
        
	
	<!--Thumbnail Navigation-->
	<div id="prevthumb"></div>
	<div id="nextthumb"></div>
	
	<!--Arrow Navigation-->

	
	<div id="thumb-tray" class="load-item">
		<div id="thumb-back"></div>
		<div id="thumb-forward"></div>
	</div>
	
	<!--Control Bar-->
	<div id="controls-wrapper" class="load-item">
		<div id="controls">
                    
			<!--Thumb Tray button-->
			<a id="tray-button"><img id="tray-arrow" src="includes/imagens/button-tray-up.png"/></a>
			
			<!--Navigation-->
			<ul id="slide-list"></ul>
                        
                        <img src="includes/imagens/logo2.png"/>
			
		</div>
	</div>